import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';
import { DAGTask } from '@api/git';
import { DDbodyComponent } from '../ddbody/ddbody.component';
declare let jsPlumb: any;
declare let $      : any;
import {v4 as uuidv4}  from 'uuid';

@Component({
  selector: 'kd-dragable-contain',
  templateUrl: './dragable-contain.component.html',
  styleUrls: ['./dragable-contain.component.scss']
})
export class DragableContainComponent implements OnInit {
  @ViewChildren(DDbodyComponent) panes!: QueryList<DDbodyComponent>;
  constructor() { }
  heroes = [1,2,3]
  areaId = '#drop-bg'

  tasklist :DAGTask[] = [
    {
      id:uuidv4(),
      taskname:"task1",
      runprog:"" ,
      command:"", 
      depend:[],
    },

  ]

  dropNode(ui:any) {
    console.log(ui)
  }
  ngOnInit(): void {
    jsPlumb.setContainer('diagramContainer')
    $('.btn-controler').draggable({
      helper: 'clone',
      scope: 'ss'
    })
    //设定�??仍的区域
    $(this.areaId).droppable({
      scope: 'ss',
      drop: (event: any, ui: any) => {
        event;
        this.dropNode(ui)
      }
    })

    //ngAfterViewInit()
    jsPlumb.bind('dblclick', (conn: any, originalEvent: any) => {
      //this.deleteLine(conn);
      //originalEvent;
      console.log(conn)
      console.log(originalEvent)
    })

    // 当链接建�??
    jsPlumb.bind('beforeDrop', (info: any) => {
      //return this.connectionBeforeDropCheck(info)
      console.log(info)
    })

    jsPlumb.importDefaults({
      ConnectionsDetachable: true
    })
  }

}
